<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">


<!-- Mirrored from www.grafikart.fr/demo/coreadmin/modal.html by HTTrack Website Copier/3.x [XR&CO'2010], Mon, 29 Aug 2011 06:37:41 GMT -->

<head>
    <title>Your Admin Panel</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- Reset all CSS rule -->
    <link rel="stylesheet" href="css/reset.css" th:href="@{/asserts/css/reset.css}" />

    <!-- Main stylesheed  (EDIT THIS ONE) -->
    <link rel="stylesheet" href="css/style.css" th:href="@{/asserts/css/style.css}" />

    <!-- jQuery AND jQueryUI -->
    <script type="text/javascript"
            src="../../../ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"
            th:src="@{../../../ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js}"></script>
    <script type="text/javascript"
            src="../../../ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"
            th:src="@{../../../ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js}"></script>
    <link rel="stylesheet" href="css/jqueryui/jqueryui.css" th:href="@{/asserts/css/jqueryui/jqueryui.css}"/>

    <!-- jWysiwyg - https://github.com/akzhan/jwysiwyg/ -->
    <link rel="stylesheet" href="js/jwysiwyg/jquery.wysiwyg.old-school.css" th:href="@{/asserts/js/jwysiwyg/jquery.wysiwyg.old-school.css}"/>
    <script type="text/javascript" src="js/jwysiwyg/jquery.wysiwyg.js" th:src="@{/asserts/js/jwysiwyg/jquery.wysiwyg.js}" }></script>


    <!-- Tooltipsy - http://tooltipsy.com/ -->
    <script type="text/javascript" src="js/tooltipsy.min.js" th:src="@{/asserts/js/tooltipsy.min.js}"></script>

    <!-- iPhone checkboxes - http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html -->
    <script type="text/javascript" src="js/iphone-style-checkboxes.js" th:src="@{/asserts/js/iphone-style-checkboxes.js}"></script>
    <script type="text/javascript" src="js/excanvas.js" th:src="@{/asserts/js/excanvas.js}"></script>

    <!-- Load zoombox (lightbox effect) - http://www.grafikart.fr/zoombox -->
    <script type="text/javascript" src="js/zoombox/zoombox.js" th:src="@{/asserts/js/zoombox/zoombox.js}"></script>
    <link rel="stylesheet" href="js/zoombox/zoombox.css" th:src="@{/asserts/js/zoombox/zoombox.css}"/>

    <!-- Charts - http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/ -->
    <script type="text/javascript" src="js/visualize.jQuery.js" th:src="@{/asserts/js/visualize.jQuery.js}"></script>

    <!-- Uniform - http://uniformjs.com/ -->
    <script type="text/javascript" src="js/jquery.uniform.min.js" th:src="@{/asserts/js/jquery.uniform.min.js}"></script>


    <!-- Main Javascript that do the magic part (EDIT THIS ONE) -->
    <script type="text/javascript" src="js/main.js" th:src="@{/asserts/js/main.js}"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            -o-font-smoothing: antialiased;
            font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        body {
            font-family: "Open Sans", Helvetica, Arial, sans-serif;
            font-weight: 300;
            font-size: 12px;
            line-height: 30px;
            color: #777;
            background: #0CF;
        }

        .container {
            max-width: 400px;
            width: 100%;
            margin: 0 auto;
            position: relative;
        }

        #contact input[type="text"],
        #contact input[type="text"],
        #contact input[type="password"],
        #contact input[type="text"],
        #contact input[type="text"],
        #contact button[type="submit"] {
            font: 400 12px/16px "Open Sans", Helvetica, Arial, sans-serif;
        }

        #contact {
            background: #F9F9F9;
            padding: 25px;
            margin: 5px 0;
        }

        #contact h3 {
            color: #F96;
            display: block;
            font-size: 30px;
            font-weight: 400;
        }

        #contact h4 {
            margin: 5px 0 15px;
            display: block;
            font-size: 13px;
        }

        fieldset {
            border: medium none !important;
            margin: 0 0 10px;
            min-width: 100%;
            padding: 0;
            width: 100%;
        }

        #contact input[type="text"],
        #contact input[type="text"],
        #contact input[type="password"],
        #contact input[type="text"],
        #contact input[type="text"] {
            width: 100%;
            border: 1px solid #CCC;
            background: #FFF;
            margin: 0 0 5px;
            margin-bottom: 25px;
            padding: 10px;
        }

        #contact input[type="text"]:hover,
        #contact input[type="text"]:hover,
        #contact input[type="password"]:hover,
        #contact input[type="text"]:hover,
        #contact input[type="text"]:hover {
            -webkit-transition: border-color 0.3s ease-in-out;
            -moz-transition: border-color 0.3s ease-in-out;
            transition: border-color 0.3s ease-in-out;
            border: 1px solid #AAA;
        }



        #contact button[type="submit"] {
            cursor: pointer;
            width: 40%;
            border: none;
            background: #0CF;
            color: #FFF;
            margin: 0 0 5px;
            margin-left: 95px;
            padding: 10px;
            font-size: 15px;
        }

        #contact button[type="submit"]:hover {
            background: #09C;
            -webkit-transition: background 0.3s ease-in-out;
            -moz-transition: background 0.3s ease-in-out;
            transition: background-color 0.3s ease-in-out;
        }

        #contact button[type="submit"]:active {
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
        }

        #contact input:focus,
        #contact textarea:focus {
            outline: 0;
            border: 1px solid #999;
        }

        ::-webkit-input-placeholder {
            color: #888;
        }

        :-moz-placeholder {
            color: #888;
        }

        ::-moz-placeholder {
            color: #888;
        }

        :-ms-input-placeholder {
            color: #888;
        }
        #preview {
            border: 1px solid #ccc;
            width: 50%;
            height: 200px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }

    </style>

</head>

<body class="modal white">





<!--
          CONTENT
                    -->
<div id="content" class="white">



    <div class="bloc">
        <div class="title">
            Table Content with pictures
        </div>
        <div class="container">
            <form id="contact" th:action="@{/front/index}" method="post" target="_top" name="upd_pwd_form" enctype="multipart/form-data">
                <h3>注册界面</h3>


                <fieldset>
                    <input placeholder="请输入姓名" type="text" name="user_name" tabindex="2" required>
                </fieldset>
                <fieldset>
                    <input placeholder="请输入密码" type="password" name="user_pwd"  tabindex="3" required>
                </fieldset>
                <fieldset>
                    <input placeholder="请确认密码" type="password" name="manager_new_pwd" tabindex="4" required>
                </fieldset>
                <fieldset id="file_upload">
                    　　<p>上传头像：</p>
                    　　<div id="preview"></div>
                    　　<p>
                    　　　　<input type="file" id="test-image-file" name="test" accept="image/gif, image/jpeg, image/png, image/jpg">
                    　　</p>
                        <p id="test-file-info"></p>
                </fieldset>



                <fieldset>
                    <button name="submit" onclick="checkPwd()" type="submit" id="contact-submit" >确认</button>
                </fieldset>
            </form>

        </div>
    </div>
</div>
<script th:inline="javascript">
    //在js代码中使用thyemeleaf模板
    function checkPwd(){


        if(upd_pwd_form.manager_pwd.value!=upd_pwd_form.manager_new_pwd.value){

            alert("两次新密码输入不一致");
            return ;
        }

        upd_pwd_form.submit();//如果符合条件，就提交表单

    }
</script>
<script type="text/javascript">
    var
        fileInput = document.getElementById('test-image-file'),
        info = document.getElementById('test-file-info'),
        preview = document.getElementById('test-image-preview');
    // 监听change事件:
    fileInput.addEventListener('change', function() {
        // 清除背景图片:
        preview.style.backgroundImage = '';
        // 检查文件是否选择:
        if (!fileInput.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        // 获取File引用:
        var file = fileInput.files[0];
        //判断文件大小
        var size = file.size;
        if (size >= 1 * 1024 * 1024) {
            alert('文件大小超出限制');
            return false;
        }
        // 获取File信息:
        info.innerHTML = '文件名称: ' + file.name + '<br>' +
            '文件大小: ' + file.size + '<br>' +
            '上传时间: ' + file.lastModifiedDate;
        if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
            alert('不是有效的图片文件!');
            return;
        }
        // 读取文件:
        var reader = new FileReader();
        reader.onload = function(e) {
            var
                data = e.target.result;
            preview.style.backgroundImage = 'url(' + data + ')';
        };
        // 以DataURL的形式读取文件:
        reader.readAsDataURL(file);

    });
</script>


</body>

<!-- Mirrored from www.grafikart.fr/demo/coreadmin/modal.html by HTTrack Website Copier/3.x [XR&CO'2010], Mon, 29 Aug 2011 06:37:55 GMT -->

</html>